<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="TheWorkDetailsTop" :style="{backgroundColor:'rgba(255, 255, 255, '+opcy+')'}">
      <div class="TheWorkDetailscontainer">
        <div class="TWDT_back" @click="backBtn">
          <span class="iconfont icon-zuojiantou" :style="{color:color}"></span>
        </div>
        <div class="TWDT_worksname">
          <span :style="{opacity:opcy}">{{bookInfo.entry.title}}</span>
        </div>
        <div class="TWDT_right" :style="{color:color}">
          <div class="download">
            <span class="iconfont icon-xiazai"></span>
            <p>全本下载</p>
          </div>
          <div class="share" :style="{color:color}">
            <span class="iconfont icon-fenxiang"  @click="showShare = true"></span>
            <p>分享</p>
          </div>
          <div class="more" @click="openmember" :style="{color:color}">
            <span class="iconfont icon-gengduo"></span>
            <p>更多</p>
          </div>
          <div class="popupBox" v-if="memberShow">
            <router-link tag="p" to="/member">
              <span class="iconfont icon-VIP"></span>开通会员
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 大背景及介绍 -->
    <div class="TheWorkDetailsBigBackgroundColor">
      <div class="TheWorkDetailscontainer">
        <div class="TWDBBC_left">
          <h3>{{bookInfo.entry.title}}</h3>
          <p class="writer">作者： <span>{{bookInfo.entry.author.name}}</span></p>
          <p>{{bookInfo.entry["pris:book"].category}}·连载·{{bookInfo.entry["pris:book"].words | hotCount }}字</p>
        </div>
        <div class="TWDBBC_right">
          <div class="TWDBBCR_Img">
            <img :src="BIF.cover" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 评分 -->
    <div class="TheWorkDetailsGraded">
      <div class="TWDG_bookGraded">
        <p>8.9<span>分</span></p>
        <p class="introduce">书籍评分</p>
      </div>
      <div class="TWDG_nowRead">
        <p>8855<span>人</span></p>
        <p class="introduce">正在阅读</p>
      </div>
      <div class="TWDG_bookTicket">
        <p>8086<span>票</span></p>
        <p class="introduce">累计必读票<span class="iconfont icon-youjiantou1"></span></p>
      </div>
    </div>
    <!-- 简介和目录 -->
    <div class="TheWorkDetailsIntro">
      <div class="TheWorkDetailscontainer">
        <!-- 简介部分 -->
        <div class="TWDI_Intro">
          <p><span>简介:</span>{{bookInfo.entry.summary}}</p>
          <!-- <p><span>角色:</span>天阳</p> -->
          <p class="TWDII_classify">分类: <span>{{bookInfo.entry["pris:book"].keyname}}</span></p>
        </div>
        <!-- 目录部分 -->
        <!-- <div class="TWDI_catalogue"> -->
          <router-link :to="'/catalogueList?id='+bookID" tag="div" class="TWDI_catalogue">
          <p><span class="cata">目录</span><span class="content">连载至{{navPointlist[navPointlist.length-1].navLabel.split(',')[1]}}</span><span class="updata">24分钟前更新<span class="iconfont icon-youjiantou1"></span></span></p>
          </router-link>
        <!-- </div> -->
      </div>
    </div>
    <!-- 书评 -->
    <div class="bookReview">
      <div class="TheWorkDetailscontainer">
        <div class="TWDBR_Title">
          <div class="comment">书评<span>({{commentList.length}}条)</span></div>
          <!-- <div class="write"> -->
            <router-link class="write" tag="div" :to="'bookReviewList?id='+bookID">
              <span class="iconfont icon-bianjishuping"></span><span>写书评</span>
            </router-link>
          <!-- </div> -->
        </div>
        <!-- <div class="commentClassification">
          <span class="icon">全部</span>
          <span>好看 2481</span>
          <span>一般 412</span>
          <span>不好看 39</span>
          <span>打赏留言 936</span>
          <span>精华 6</span>
          <span>作者说 1</span>
        </div> -->
        <div class="TWDBR_Box">
          <div class="TWDBRB_Comment" v-for="item in commentList.slice(0,3)" :key="item.userId">
            <div class="TWDBRBC_info">
              <div class="info_Img">
                <img :src="item.avatar" alt="">
              </div>
              <div class="author">
                <span class="A_Name">{{item.nickName}}</span>
                <span class="LV_Tag">Lv {{item.grade}}</span>
              </div>
              <div class="info_right">
                <span class="iconfont icon-gengduo"></span>
              </div>
            </div>
            <div class="remark">
              <p class="remark_text">{{item.comment}}</p>
              <p class="time_info">
                <span class="time">{{item.time | Tiem}}</span>
                <span>{{item.replyCount}}<span class="iconfont icon-31pinglun"></span></span>
                <span>{{item.likes}}<span class="iconfont icon-dianzan1"></span></span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="bookReviewMore"> -->
        <router-link class="bookReviewMore" tag="div" :to="'bookReviewList?id='+bookID">
          <p>查看全部{{commentList.length}}条书评<span class="iconfont icon-youjiantou1"></span></p>
        </router-link>
      <!-- </div> -->
    </div>
    <!-- 作者的其他作品 -->
    <!-- <div class="author_rests">
      <div class="TheWorkDetailscontainer">
        <div class="author_rests_title">
          <span>作者的其他作品</span>
        </div>
        <div class="author_rests_content">
          <div class="ARC_Box">
            <div class="ARCB_Img">
              <img src="" alt="">
            </div>
            <div class="ARCB_Content">
              <p class="ARCBC_name">
                <span>末日边缘</span>
                <span class="ARCBC_right">8.7<span class="ARCBC_score">分</span></span>
              </p>
              <p class="ARCBC_text">破晓之战后，地球进入高级战争时代。不同星球的文明碰撞，侵略与蒸发成为唯一...</p>
              <p class="ARCBC_tag">末世危机·完结·5150人在读</p>
            </div>
          </div>
          <div class="ARC_Box">
            <div class="ARCB_Img">
              <img src="" alt="">
            </div>
            <div class="ARCB_Content">
              <p class="ARCBC_name">
                <span>末日边缘</span>
                <span class="ARCBC_right">8.7<span class="ARCBC_score">分</span></span>
              </p>
              <p class="ARCBC_text">破晓之战后，地球进入高级战争时代。不同星球的文明碰撞，侵略与蒸发成为唯一...</p>
              <p class="ARCBC_tag">末世危机·完结·5150人在读</p>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 猜你喜欢 -->
    <!-- <div class="TWD_like">
      <div class="TheWorkDetailscontainer">
        <div class="TWDL_Title">
          <span>猜你喜欢</span>
        </div>
        <div class="googBookBox">
            <router-link class="GBB_li" v-for="(item,index) in booklist[4].list.slice(0,3)" :key="booklist[5].list[index].id" :to="'/TheWorkDetails?id='+item.id" tag="div">
            <div class="GBB_li" v-for="(item,index) in booklist[4].list.slice(0,3)" :key="booklist[5].list[index].id">
                <div class="GBB_li_Img">
                    <img :src="item.cover" alt="">
                </div>
                <div class="GBB_li_Text">
                    <p class="GBBLT_name">{{item.title}}</p>
                    <p class="GBBLT_classify">{{item.category}}</p>
                </div>
            </div>
            </router-link>
            <div class="GBB_li" v-for="(item,index) in booklist[3].list.slice(0,2)" :key="booklist[6].list[index].id">
                <div class="GBB_li_Img">
                    <img :src="item.cover" alt="">
                </div>
                <div class="GBB_li_Text">
                    <p class="GBBLT_name">{{item.title}}</p>
                    <p class="GBBLT_classify">{{item.category}}</p>
                </div>
            </div>
            <div class="GBB_li" v-for="(item,index) in booklist[7].list.slice(0,3)" :key="booklist[7].list[index].id">
                <div class="GBB_li_Img">
                    <img :src="item.cover" alt="">
                </div>
                <div class="GBB_li_Text">
                    <p class="GBBLT_name">{{item.title}}</p>
                    <p class="GBBLT_classify">{{item.category}}</p>
                </div>
            </div>
        </div>
      </div>
    </div> -->
    <!-- 版权信息 -->
    <div class="copyright_info">
      <div class="TheWorkDetailscontainer">
        <p>本作品由“纵横中文网”授权七猫，版权由“纵横中文网”负责。如有疑问可联系:fawu@qimao.com或客服QQ:3598987377</p>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="TheWorkDetailsBottom">
      <div class="TheWorkDetailscontainer">
        <div class="addBook" @click="addBook">
          <span class="iconfont icon-jiarushujia" v-show="!Showicon"></span>
          <span class="iconfont icon-yizaishujia" v-show="Showicon" style="color:#aaa"></span>
          <p v-show="!Showicon">添加书架</p>
          <p v-show="Showicon" style="color:#aaa">已在书架</p>
        </div>
        <div class="listenToStorytelling" @click="litenbook">
          <span class="iconfont icon-tingshu"></span>
          <p>听书</p>
        </div>
        <!-- <div class="readBtn"> -->
        <router-link class="readBtn" tag="div" :to="'/ReadThePage?id='+bookID">
          <span>立即免费阅读</span>
        </router-link>
        <!-- </div> -->
      </div>
    </div>
    <van-share-sheet
    v-model="showShare"
    title="分享"
    :options="options"
    @select="onSelect"
    />
  </div>
</template>

<script>
import Vue from 'vue';
import { ShareSheet,Toast } from 'vant';
import { getbookGetsub,getBookInfo } from  "../api/TheWorkDetails";
import {getBookCatalog} from "../api/catalogueList"
import {getCommentGetComments} from '../api/bookReviewList';
import { getStoreNavi,getStoreShow } from '../api/bookCity';


Vue.use(ShareSheet);
export default {
  data(){
    return{
      opcy:0,
      bgsize:60,
      color:"white",
      showShare: false,
      memberShow:false,
      bookID:null,
      bookInfo:[],
      navPointlist:[],
      commentList:[],
      BIF:[],
      StoreNaviID:null,
      Showicon:false,
      repetition:false,
      options: [
          { name: '分享到微信', icon: 'wechat' },
          { name: '分享到微博', icon: 'weibo' },
          { name: '分享到QQ', icon: 'qq' },
          { name: '分享到空间', icon: 'link' },
          { name: '复制链接', icon: 'link' },
          { name: '分享到其他', icon: 'link' },
      ],
    }
  },
  methods:{
    // 添加后书架的显示隐藏
    addrackFun(){
      let vuexIdList = this.$store.state.bookIDList;
      console.log(vuexIdList)
      let a = vuexIdList.findIndex(item => item == this.bookID);
      console.log("返回的下标",a)
      if(a == -1){
        this.Showicon = false
        this.repetition = false
      }else{
        this.Showicon = true
        this.repetition = true;
      }
    },
    // 返回按钮
    backBtn(){
      this.$store.commit("addHistoryData",this.bookID);
      if(this.Showicon == true && this.repetition == false){
        this.$store.commit("addbookData",this.bookID);
      }else if(this.Showicon == false && this.repetition == true){
        this.$store.commit("delbookData",this.bookID)
      }
      this.$router.go(-1);
    },
    // 书城导航接口
    getStoreNaviFun(){
        getStoreNavi().then(data=>{
            console.log("书城导航模块",data)
            this.StoreNaviID = data.data.navi[3].id;
            // console.log(this.StoreNaviID)
        })
    },
    // 书城展示模块
    getStoreShowFun(){
        getStoreShow({"uuid":this.StoreNaviID}).then(data=>{
            console.log("书城展示模块",data)
            this.booklist = [];
            this.booklist = data.data.list;
            // console.log(this.booklist)
            this.count += 1;
        })
    },
    // 获取书籍评论
    getCommentGetCommentsFun(id){
      getCommentGetComments({bookId:id}).then(data=>{
        this.commentList = data.all.list;
        console.log("书籍评论",this.commentList)
      })
    },
    // 获取小说章节
    getBookCatalogFun(id){
      getBookCatalog({tocId:id}).then(data=>{
          this.navPointlist = data.ncx.navMap.navPoint.navPoint;
          console.log("小说章节",this.navPointlist);
      })
    },
    // 书籍详情接口
    getbookGetsubFun(id){
      getbookGetsub({id:id}).then(data=>{
        console.log(data)
        this.bookInfo = data.feed;
        console.log(this.bookInfo)
      })
    },
    // 书籍简单详情
    getBookInfoFun(id){
      getBookInfo({sourceUuid:id}).then(data=>{
        console.log(data)
        this.BIF = data.data.book;
        console.log(this.BIF)
      })
    },
    // 滑动触发顶部导航栏显示隐藏
    handleScroll(){
        let height = window.pageYOffset;
        // let top = this.$refs.backTop.getBoundingClientRect().top;
        // console.log('滚动高度',height)
        // console.log('距离顶部高度',top);
        this.opcy = height > 50? 1 : 0;
        this.bgsize = height >30? 30 : 60;
        this.color = height > 30? "black":"white" 
        // console.log('用户信息=>',this.playlist)
        // console.log(window.localStorage,window.localStorage.uid,this.getUserDetaiFun())
    },
    // 分享开启
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 开通会员
    openmember(){
      this.memberShow = !this.memberShow; 
    },
    // 添加书架
    addBook(){
      this.Showicon = !this.Showicon
      if(this.Showicon == true){
        Toast("已加入书架");
      }else{
        Toast("已取消加入");
      }
      console.log(this.Showicon)
    },
    // 听书
    litenbook(){
      Toast("功能尚未开放");
    }
  },
  mounted(){
    window.addEventListener('scroll',this.handleScroll,true)
  },
  created(){
    this.bookID = this.$route.query.id;
    console.log(this.bookID);
    this.getbookGetsubFun(this.bookID);
    this.getBookCatalogFun(this.bookID);
    this.getCommentGetCommentsFun(this.bookID);
    this.getBookInfoFun(this.bookID);
    this.getStoreNaviFun();
    this.getStoreShowFun();
    this.addrackFun();
  },
  filters:{
    hotCount(value){
        let w = value > 10000? value / 10000 : value; // 万计算
        let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
        return y;
    },
    Tiem(value){
        const t = new Date(value)
        // 日期格式
        const format = 'Y-m-d h:i:s'
        let year = t.getFullYear()
        // 由于 getMonth 返回值会比正常月份小 1
        let month = t.getMonth() + 1
        let day = t.getDate()
        let hours = t.getHours()
        let minutes = t.getMinutes()
        let seconds = t.getSeconds()
        month = month > 9 ? month : `0${month}`
        day = day > 9 ? day : `0${day}`
        hours = hours > 9 ? hours : `0${hours}`
        minutes = minutes > 9 ? minutes : `0${minutes}`
        seconds = seconds > 9 ? seconds : `0${seconds}`
        const hash = {
            'Y': year,
            'm': month,
            'd': day,
            'h': hours,
            'i': minutes,
            's': seconds
        }
        return format.replace(/\w/g, o => {
            return hash[o]
        })
    }
  },
}
</script>

<style lang="less">
.TheWorkDetailscontainer{
  width: 92%;
  margin: 0px auto;
}
.TheWorkDetailsTop{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  .TheWorkDetailscontainer{
    height: 100%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    .TWDT_back{
      color: white;
      span{
        font-size: 20px;
        font-weight: bold;
      }
    }
    .TWDT_worksname{
      color: black;
      font-weight: bold;
      width: 50%;
      text-align: left;
      span{
        line-height: 20px;
      }
    }
    .TWDT_right{
      width: 40%;
      display: flex;
      justify-content: space-between;
      color: white;
      position: relative;
      .download{
        font-size: 12px;
        span{
          font-size: 20px;
        }
      }
      .share{
        font-size: 12px;
        span{
          font-size: 20px;
        }
      }
      .more{
        font-size: 12px;
        span{
          font-size: 20px;
        }
      }
      .popupBox{
        position: absolute;
        top: 41px;
        right: -10px;
        background-color: #fff;
        color: #333;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0px 0px 1px #ccc;
        span{
          font-size: 20px;
        }
      }
    }
  }
}
.TheWorkDetailsBigBackgroundColor{
  padding-top: 70px;
  padding-bottom: 30px;
  background-color: #505656;
  .TheWorkDetailscontainer{
    display: flex;
    justify-content: space-between;
    .TWDBBC_left{
      font-size: 14px;
      h3{
        font-size: 20px;
        font-weight: bold;
        color: white;
      }
      p{
        color: #b5b7b7;
        span{
          color: white;
          border-bottom: 1px solid white;
        }
      }
      p.writer{
        margin-top: 10px;
        margin-bottom: 50px;
      }
    }
    .TWDBBC_right{
      .TWDBBCR_Img{
        width: 100px;
        height: 125px;
        background-color: pink;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.TheWorkDetailsGraded{
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  padding: 12px 0px;
  background-color: white;
  margin-bottom: 10px;
  .TWDG_bookGraded{
    width: 30%;
    p{
      font-weight: bold;
      font-size: 22px;
      span{
        font-size: 14px;
      }
    }
    p.introduce{
      font-size: 14px;
      font-weight: normal;
      color: #aaa;
    }
  }
  .TWDG_nowRead{
    width: 30%;
    p{
      font-weight: bold;
      font-size: 22px;
      span{
        font-size: 14px;
      }
    }
    p.introduce{
      font-size: 14px;
      font-weight: normal;
      color: #aaa;
    }
  }
  .TWDG_bookTicket{
    width: 30%;
    p{
      font-weight: bold;
      font-size: 22px;
      span{
        font-size: 14px;
      }
    }
    p.introduce{
      font-size: 14px;
      font-weight: normal;
      color: #aaa;
    }
  }
}
.TheWorkDetailsIntro{
  background-color: #fff;
  padding-top: 15px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  .TWDI_Intro{
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    p{
      line-height: 30px;
      span{
        font-weight: bold;
      }
    }
    p.TWDII_classify{
      font-weight: bold;
      span{
        font-weight: normal;
        color: #6488af;
        padding: 0px 5px;
        border-right: 1px solid #ccc;
      }
      span:last-child{
        border-right: none;
      }
    }
  }
  .TWDI_catalogue{
    font-size: 12px;
    margin-top: 10px;
    p{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cata{
        font-size: 16px;
        font-weight: bold;
      }
      .content{
        width: 60%;
        color: #aaa;
      }
      .updata{
        color: #aaa;
        display: flex;
        align-items: center;
      }
    }
  }
}
.bookReview{
  background-color: #fff;
  margin-bottom: 10px;
  .TheWorkDetailscontainer{
    .TWDBR_Title{
      display: flex;
      justify-content: space-between;
      text-align: center;
      align-items: center;
      padding: 10px 0px;
      .comment{
        font-weight: bold;
        span{
          margin-left: 10px;
        }
      }
      .write{
        background-color: #fcd335;
        font-size: 14px;
        padding: 4px 10px;
        border-radius: 20px;
      }
    }
    .commentClassification{
      display: flex;
      flex-wrap: wrap;
      span{
        padding: 4px 10px;
        border-radius: 20px;
        background-color: #f8f8f8;
        font-size: 12px;
        margin-right: 12px;
        margin-bottom: 8px;
        color: #666;
      }
      span.icon{
        background-color: #fff4c2;
        color: #333;
      }
    }
    .TWDBR_Box{
      .TWDBRB_Comment{
        .TWDBRBC_info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0px;
          .info_Img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            background-color: aqua;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .author{
            width: 78%;
            .A_Name{
              font-size: 14px;
              color: #aaa;
              margin-right: 10px;
            }
            .A_Tag{
              background-color: #fcd335;
              font-size: 12px;
              padding: 1px 3px;
              border-radius: 4px;
            }
            .LV_Tag{
              font-size: 12px;
              padding: 1px 4px;
              background-color: #b6c6dd;
              border-radius: 20px;
              color: white;
            }
          }
          .info_right{
            span{
              color: #aaa;
            }
          }
        }
        .remark{
          padding-bottom: 10px;
          p.remark_text{
            font-size: 14px;
            line-height: 24px;
            width: 100%;
            word-wrap: break-word;
          }
          p.time_info{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            span.time{
              width: 70%;
            }
            span{
              font-size: 13px;
              color: #aaa;
              span{
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  .bookReviewMore{
    text-align: center;
    border-top: 1px solid #eee;
    p{
      font-size: 14px;
      line-height: 50px;
    }
  }
}
.author_rests{
  background-color: #fff;
  padding-bottom: 10px;
  margin-bottom: 10px;
  .TheWorkDetailscontainer{
    .author_rests_title{
      padding: 15px 0px;
      font-size: 18px;
      font-weight: bold;
    }
    .author_rests_content{
      .ARC_Box{
        padding: 10px 0px;
        display: flex;
        justify-content: space-between;
        .ARCB_Img{
          width: 80px;
          height: 100px;
          background-color: orange;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .ARCB_Content{
          width: 70%;
          .ARCBC_name{
            display: flex;
            justify-content: space-between;
            span.ARCBC_right{
              font-weight: bold;
              color: orange;
              span.ARCBC_score{
                font-size: 12px;
                font-weight: normal;
              }
            }
          }
          .ARCBC_text{
            margin-top: 8px;
            font-size: 13px;
            color: #aaa;
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .ARCBC_tag{
            font-size: 13px;
            color: #aaa;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
.TWD_like{
  background-color: #fff;
  margin-bottom: 10px;
  .TWDL_Title{
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0px;
  }
  .googBookBox{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .GBB_li{
            width: 22%;
            margin-bottom: 20px;
            .GBB_li_Img{
                width: 100%;
                height: 100px;
                background-color: blue;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .GBB_li_Text{
                .GBBLT_name{
                    height: 48px;
                    line-height: 24px;
                    font-size: 15px;
                    font-weight: bold;
                }
                .GBBLT_grade{
                    font-size: 14px;
                    color: #ffa500;
                    span{
                        font-size: 12px;
                    }
                }
                .GBBLT_classify{
                    font-size: 14px;
                    color: #aaa;
                }
            }
        }
  }
}
.copyright_info{
  background-color: #fff;
  padding: 10px 0px;
  padding-bottom: 70px;
  p{
    font-size: 13px;
    line-height: 20px;
    color: #aaa;
  }
}
.TheWorkDetailsBottom{
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: #f5f5f5;
  .TheWorkDetailscontainer{
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    .addBook{
      color: #666;
      span{
        font-size: 32px;
      }
      p{
        font-size: 13px;
      }
    }
    .listenToStorytelling{
      color: #666;
      span{
        font-size: 32px;
      }
      p{
        font-size: 13px;
      }
    }
    .readBtn{
      width: 40%;
      background-color: #ffde3a;
      padding: 10px 30px;
      border-radius: 20px;
      font-weight: bold;
    }
  }
}
</style>